<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      height: 50px;
    }

    .dv1 {
      border: 2px solid red;
    }

    .dv2 {
      border: 2px solid green;
    }
  </style>
</head>
<!-- 
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
提示：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。
如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
你可以使用 appendChild() 方法移除元素到另外一个元素。
-->

<body>
  <ul>
    <li>123</li>
  </ul>
  <div class="dv1">

  </div>
  <div class="dv2">
    <span>先删除我，我再跑到别的元素身上了</span>
  </div>
  <input type="button" value="点吧" id="btn">
</body>
<script>
  // 1.创建元素节点
  let li = document.createElement("li");
  // 2.添加节点
  let ul = document.querySelector("ul");
  // node.appendChild(child) node父级节点，child是子节点，往后面追加元素
  ul.appendChild(li);

  let lili = document.createElement("li");
  // 3.添加节点 node.insertBefore(child,指定元素)
  // 指定元素  指添加到那个元素的前面
  ul.insertBefore(lili, ul.children[0]);
</script>
<script>
  "use strict";
  document.getElementById("btn").addEventListener("click", () => {
    let dv2 = document.querySelector(".dv2").children[0];
    document.querySelector(".dv1").appendChild(dv2);
  });
</script>

</html>